<template>
  <div class="register">
    <img class="bg" src="../../public/login-bg.jpg" alt="">  
    <el-card class="box-card">
      <h1>注册</h1>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-position="top"
        class="register-from"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model.number="ruleForm.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <div class="btnGroup">
            <el-button type="primary" size="large" @click="submitForm(ruleFormRef)"
              >注册</el-button
            >
            <el-button size="large" @click="resetForm(ruleFormRef)">重置</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>
  
<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import {regist} from '@/api'
  import {useRouter} from 'vue-router'
  import { useUserStore } from '@/store/user';
  const { Login } = useUserStore();

  const router = useRouter()
  
  const ruleFormRef = ref<FormInstance>()
  
  const checkName = (_rule: any, value: any, callback: any) => {
    if (!value) {
      callback(new Error('请输入用户名'))
    }else{
      callback()
    }    
  }
  
  const validatePass = (_rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('请输入密码'))
    } else {
      if(ruleForm.checkPass.trim() && value !== ruleForm.checkPass){
        callback(new Error('两次密码输入不匹配'))
      }else{
        callback()
      }      
    }
  }
  const validatePass2 = (_rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('请再次确认密码'))
    } else if (value !== ruleForm.password) {
      callback(new Error("两次密码输入不匹配"))
    } else {
      callback()
    }
  }
  
  const ruleForm = reactive({password: '',checkPass: '',name: '',})
  
  const rules = reactive<FormRules<typeof ruleForm>>({
    password: [{ required:true,validator: validatePass, trigger: 'blur' }],
    checkPass: [{ required:true,validator: validatePass2, trigger: 'blur' }],
    name: [{ required:true,validator: checkName, trigger: 'blur' }],
  })
  
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => { valid && logIn() })
  }

  async function logIn(){
    await regist(ruleForm)    
    await Login(ruleForm)
    router.push({name: '个人信息'})
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
</script>
  
<style scoped lang="less">
.register{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .bg{
    width: 100%;
    height: 100%;
  }
}
.box-card {
  background-color: transparent;
  position: absolute;
  top: 0;left: 0;right: 100px;bottom: 400px;margin: auto;
  width: 600px;
  height: 420px;
  h1{
    margin-bottom: 15px;
  }
}
.register-from {
  margin: auto auto;
  font-size: 18px;
}
::v-deep .el-form-item__label{
  font-size: 20px;
}
::v-deep .el-input__wrapper{
  height: 40px;
}
::v-deep .el-input__inner,::v-deep .el-button--large{
  font-size: 18px !important;
}
.btnGroup{
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  .regist{
    margin: 0 20px;
  }
}
</style>